import React from 'react';
import HomeStore from '../stores/HomeStore';
import HomeActions from '../actions/HomeActions';
import NavbarActions from '../actions/NavBarActions';


class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = HomeStore.getState();
        this.onChange = this.onChange.bind(this);
    }

    componentDidMount() {
        HomeStore.listen(this.onChange);
        HomeActions.getRequireList();

        $(document).ajaxStart(() => {
            NavbarActions.updateAjaxAnimation('fadeIn');
        });

        $(document).ajaxComplete(() => {
            setTimeout(() => {
                NavbarActions.updateAjaxAnimation('fadeOut');
            }, 750);
        });
    }

    componentWillUnmount() {
        HomeStore.unlisten(this.onChange);
    }

    /**
     * store的构造函数发生变化以后会回调这个方法,
     * 因为和listen绑定在一起了
     * @param state
     */
    onChange(state) {
        this.setState(state);
    }

    render() {
        return (
            <div className="container">
                <div className="panel panel-default">
                    <table className="table table-stripe">
                        <thead>
                            <tr>
                                <th colSpan="2">Stats</th>
                            </tr>
                        </thead>
                        <thbody>
                            {this.state.requireList.map((req) => {
                                return (
                                    <tr>
                                        <td>{req.id}</td>
                                        <td>{req.name}</td>
                                        <td>{req.details}</td>
                                    </tr>
                                );
                            })}
                        </thbody>
                    </table>
                </div>
            </div>
        );
    }
}

export default Home;

